<template>
  <pc-button>默认按钮</pc-button>
  <pc-button type="primary">主要按钮</pc-button>
  <pc-button type="info">信息按钮</pc-button>
  <pc-button type="success">成功按钮</pc-button>
  <pc-button type="warning">警告按钮</pc-button>
  <pc-button type="danger">危险按钮</pc-button>
</template>

<style lang="scss" scoped>
svg {
  line {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;

    &#back {
      fill: none;
      stroke: #ff4d5033;
    }

    &#front {
      fill: none;
      stroke: #ff4d4f;
      stroke-dasharray: 48, 144;
      stroke-dashoffset: 192;
      animation: dash_682 1.4s linear infinite;
    }
  }
}

@keyframes dash_682 {
  72.5% {
    opacity: 0;
  }

  to {
    stroke-dashoffset: 0;
  }
}
</style>
